<template>
	<view class=" login-content" >
		<!-- <view class="zhan1"></view>
		<view class="head">
			<span class="text">登录</span>
			<view class="head-right">
				<i class="iconfont icondelete1" @tap="back"></i>
			</view>
		</view> -->
		<!-- <i class="iconfont icondengluyonghu"></i> -->
		<view class="login-box">
			<view class="login-item">
				<i class="iconfont iconzhanghao"></i>
				<input  class="login-input" type="text" placeholder="手机号码" v-model="userName">
			</view>
			<view class="login-item">
				<i class="iconfont iconai-password"></i>
				<input  class="login-input" type="password"   placeholder="登录密码" v-model="passWord">
			</view>
<!-- 			<view class="login-item">
				<i class="iconfont iconxiaoxi"></i>
				<input  class="login-input" type="number" placeholder="验证码" v-model="code">
				<span class="set" @tap="getCode" v-show="show">发送验证码</span>
				<view class="set" v-show="!show">{{countMes}}</view>
			</view> -->
		</view>
		<view class="text-box">
			<!-- <span class="back" @tap="goPage('back')">忘记密码?</span> -->
			<!-- <span class="reg" @tap="goPage('reg')">注册</span> -->
		</view>
		<view class="login-button" @tap="goLogin(false)">登录</view>

		<uni-popup ref="popup" type="center" :change='handelChange' :mask-click="false" class="check-popup">  
            <view class="publishWrapper">  
                <view  class="title" >{{title}}</view>  
                <view class="check-content" v-show="active==0">
                	<span class="label">上传身份证照片</span>
                	<view class="up-box">
                		<view class="upload-img  " :class="addClass1">
                			<img :src="imgUrl1" class="img"  v-show="imgUrl1" />
                			<view class="dialog-box" @tap="choose('1')" v-show="!imgUrl1">
                				<view class="iconfont-box" >
	                				<span class="iconfont iconjia"></span>
	                				<span class="text">身份证(头像面)</span>
	                			</view>

	                			<view class="iconfont-box" v-show="imgUrl1">
	                				<span class="iconfont iconbianji"></span>
	                			</view>
                			</view>

                			<view class="dialog-box" @tap="choose('1')" v-show="imgUrl1" style="background:rgba(0,0,0,0.3)">
                				<view class="iconfont-box">
	                				<span class="iconfont iconbianji" style="color:#ffffff;"></span>
	                			</view>

	                			
                			</view>
                			
                		</view>
                		<view class="upload-img  " :class="addClass2">
                			<img :src="imgUrl2" class="img"  v-show="imgUrl2" />
                			<view class="dialog-box" @tap="choose('2')" v-show="!imgUrl2">
                				<view class="iconfont-box" >
	                				<span class="iconfont iconjia"></span>
	                				<span class="text">身份证(国徽面)</span>
	                			</view>

	                			<view class="iconfont-box" v-show="imgUrl2">
	                				<span class="iconfont iconbianji"></span>
	                			</view>
                			</view>

                			<view class="dialog-box" @tap="choose('2')" v-show="imgUrl2" style="background:rgba(0,0,0,0.3)">
                				<view class="iconfont-box">
	                				<span class="iconfont iconbianji" style="color:#ffffff;"></span>
	                			</view>

	                			
                			</view>
                		</view>
                	</view>
                	<view class="button" v-show="!load1" @tap="next">下一步</view>
                	<view class="button" v-show="load1">照片上传中...</view>
                </view>
                <view class="check-content" v-show="active==1">
                	<view class="login-box">
						<view class="login-item">
							<i class="iconfont iconzhanghao"></i>
							<input  class="login-input" type="text" placeholder="手机号码" v-model="userName" disabled>
						</view>
						<view class="login-item">
							<i class="iconfont iconxiaoxi"></i>
							<input  class="login-input" type="number" placeholder="验证码" v-model="code">
							<span class="set" @tap="getCode" v-show="show">发送验证码</span>
							<view class="set" v-show="!show">{{countMes}}</view>
						</view>
					</view>
					<view class="button" v-show="!load2" @tap="submitCheck">提交</view>
                	<view class="button" v-show="load2">数据提交中...</view>
                </view>
            </view>  

        </uni-popup>
	</view>
</template>

<script>
	import Cookies from 'js-cookie'
	import uniPopup from "@/components/uni-popup/uni-popup"
	import CryptoJS from 'crypto-js'
	
	// 加密所需的key
	const KEY = '26c4c96764ad2319fdd3154f3fe6c4e5'
	
	// DES加密
	export const encryptDes = (msg) => {
	  var keyHex = CryptoJS.enc.Utf8.parse(KEY)
	  var option = { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 }
	  var encrypted = CryptoJS.AES.encrypt(msg, keyHex, option)
	  return encrypted.ciphertext.toString()
	}
	
	// DES解密
	export const decryptDes = (msg) => {
	  var keyHex = CryptoJS.enc.Utf8.parse(KEY)
	  var decrypted = CryptoJS.AES.decrypt(
	    {
	      ciphertext: CryptoJS.enc.Utf8.parse(msg)
	    },
	    keyHex,
	    {
	      mode: CryptoJS.mode.ECB,
	      padding: CryptoJS.pad.Pkcs7
	    }
	  )
	  return decrypted.toString(CryptoJS.enc.Utf8)
	}
	var _self;
	var canvasObj = {};
	export default {
		computed:{},
		components:{ uniPopup},
		data(){
			return{
				list:[
					{title:'未完成工单',number:13},
					{title:'正在处理工单',number:53},
					{title:'未处理工单',number:3},
					{title:'有效期提醒',number:9},
				],
				imgUrl2:'',
				userName:'',
				count:"",
				code:'',
				show:true,
	            countMes:"",
	            timer:null,
				code:'',
				imgUrl1:'',
				active:0,
				load1:false,
				load2:false,
				addClass2:'',
				addClass1:'',
				photo1:"",
				photo2:'',
				userName:'',
				title:'验证身份证',
				passWord:'',
				cWidth2: '', //横屏图表
				cHeight2: '', //横屏图表
				cWidth: '', //圆弧进度图
				cHeight: '', //圆弧进度图
				arcbarWidth: '', //圆弧进度图，进度条宽度,此设置可使各端宽度一致
				gaugeWidth: '', //仪表盘宽度,此设置可使各端宽度一致
				pixelRatio: 1,
				activeIndex:0,
				checkeFlag:false,
			}
		},
		onLoad(options) {
			 	
		},
		onBackPress(e){
			return true;
		},
		onReady(){
			//this.$refs.popup.open() 
		},
		methods:{
			handelChange(e){

			},
			next(){
	            let that = this;

	            if(this.photo1==""){
	                uni.showToast({
						title:'请上传身份证正面照片',
						icon:'none'
					})

	                return;
	            }
	            else if(this.photo2==""){
	                uni.showToast({
						title:'请上传身份证背面照片',
						icon:'none'
					})

	                return;
	            }
	            this.load1 = true;
	            this.$http.post('/f/loginUpdateCardFlag?loginName='+this.userName+"&cardPhoto1="+this.photo1+"&cardPhoto2="+this.photo2+"&mobileCode="+uni.getStorageSync("code"))
	            .then(function (response) {
	              
	              
	              that.photo1 = "";
	              that.photo2 = "";
	              that.load1 = false;
	              that.checkeFlag = true;
	              that.dialogTableVisible = false;
	               		that.goLogin(that.checkeFlag);
	            })
	            .catch(function (error) {
	              console.log(error,189);

	              if(error.data.code=="20006" || error.data.code=="20007"){
	                    if(that.activeIndex<2){
	                        that.photo1 = "";
	                          that.photo2 = "";
	                        
	                          that.imgUrl2 = "";
	                          that.imgUrl1 = "";
	                          that.activeIndex+=1;
	                          that.address1 = "";
	                          that.address2 = "";
	                    }
	                    else{
	                        uni.showToast({
	                        	title:'身份证验证失败三次后系统默认跳过身份证验证！',
	                        	icon:'none'
	                        })
	                        
				              
				              that.photo1 = "";
				              that.photo2 = "";
				              that.address1 = "";
	                          that.address2 = "";
				              that.checkeFlag = true;
				              that.dialogTableVisible = false;
	               				that.goLogin(that.checkeFlag);
				              
	                    }
	                  
	              }
	              that.load1 = false;
	            })


	            
	        },
	        submitCheck(){
	            
	            let that = this;
	            if(this.code==""){
	            	uni.showToast({
						title:'请输入验证码',
						icon:'none'
					})
					return;
	            }
	            this.load2 = true;

	            this.$http.get('/f/loginUpdateMobileFlag?loginName='+this.userName+"&mobile="+this.userName+"&mobileCode="+this.code)
	            .then(function (response) {
	               uni.showToast({
						title:'身份已验证',
					})
	               setTimeout(()=>{
	               		that.load2 = false;
	               		that.dialogTableVisible = false;
	               		that.goLogin(that.checkeFlag);
	               },300)
	              
	              
	              
	            })
	            .catch(function (error) {
	              console.log(error);
	              that.load2 = false;
	            })
	        },
			getCode(){
	          var that = this;
	          if(this.userName==""){
	         

	            uni.showToast({
					title:'请输入手机号',
					icon:'none'
				})
	          }
	          else if(!(/^1[3456789]\d{9}$/.test(this.userName))){


	            uni.showToast({
					title:'请输入正确的手机号',
					icon:'none'
				})
	          }
	          else{
	            this.$http.get('/f/getMobileValidate?mobile='+this.userName)
	            .then(function (response) {
	                uni.showToast({
						title:'短信已发送',
					})
	              let TIME_COUNT = 60;
	              that.countMes = "60S"
	              if (!that.timer) {
	                 console.log(666)
	                 that.count = TIME_COUNT;
	                 that.show = false;
	                 that.timer = setInterval(() => {
	                 if (that.count > 0 && that.count <= TIME_COUNT) {
	                   that.count--;
	                   var countMes = that.count+"S";
	                   that.countMes = countMes;
	                  } else {
	                   that.show = true;
	                   clearInterval(that.timer);
	                   that.timer = null;
	                  }
	                 }, 1000)
	              }
	            })
	            .catch(function (error) {
	              console.log(error);
	            })
	          }
	          
	        },
			choose(type){
				let that = this;

				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
				    	uni.showLoading({
				    		title:'照片上传中...'
				    	})
				        uni.uploadFile({
				            url: that.$url+'/f/uploadFile', //仅为示例，非真实的接口地址
				            filePath: res.tempFilePaths[0],
				            name: 'file',
				            success: (uploadFileRes) => {
				            	setTimeout(()=>{
				            		let data = JSON.parse(uploadFileRes.data)
					            	if(type=="1"){
					            		that.imgUrl1 = data.data.url;
					                	that.photo1 = data.data.location;
					                	that.addClass1 = "isbg"
					            	}
					            	else{
					            		that.imgUrl2 = data.data.url;
					                	that.photo2 = data.data.location;
					                	that.addClass2 = "isbg"
					            	}
					            	uni.hideLoading();
				            	},500)
				            	
				                
				            }
				        });
				    }
				});
			},
			touchPie(e,id) {
	            canvasObj[id].showToolTip(e, {
	                format: function(item) {
	                    return item.name + ':' + item.data
	                }
	            });
	        },
	        back(){
				uni.navigateBack({
				    delta: 2
				});
			},
			
			goPage(url){
				uni.navigateTo({
                    url: url,
                });
			},
			goLogin(flag){
				let that = this;
				if(this.userName==""){
					uni.showToast({
						title:'请输入账号',
						icon:'none'
					})
					return;
				}
				// else if(this.code==""){
				// 	uni.showToast({
				// 		title:'请输入验证码',
				// 		icon:'none'
				// 	})
				// 	return;
				// }
				else if(this.passWord==""){
					uni.showToast({
						title:'请输入密码',
						icon:'none'
					})
					return;
				}
				this.passWord = encryptDes(this.passWord)
				let url = "/f/login";
				// uni.setStorageSync("code",this.code)
	            // this.$http.post(url+"?loginName="+this.userName+"&mobileCode="+this.code+"&verifyBool="+(!flag))
				this.$http.post(url+"?loginName="+this.userName+"&password="+this.passWord+"&verifyBool="+(!flag))
	            .then(function (response) {
	                let obj = response.data.educationUser;
	                
	                // 2023-2-23 李超更改
	                // Cookies.set("mobile",obj.mobile,{ expires: 1 });
	                // Cookies.set("nickName",obj.name,{ expires: 1 });
	                // Cookies.set("photo",that.$url+obj.photo,{ expires: 1 });
	                // Cookies.set("token",response.data.token,{ expires: 1 });
	                // Cookies.set("jobName",obj.jobName,{ expires: 1 });
					
					uni.setStorageSync('mobile', obj.mobile);
					uni.setStorageSync('nickName', obj.name);
					uni.setStorageSync('photo', that.$url+obj.photo);
					uni.setStorageSync('token', response.data.token);
					uni.setStorageSync('jobName', obj.jobName);
					
					let loginMethod = uni.getStorageSync("qr")
					uni.switchTab({
						url: '/pages/index/index',
					})
					
					// uni.navigateBack();
					// history.back();
					// if(loginMethod == 'qr'){
					// 	// const pages = getCurrentPages();
					// 	// console.log(pages)
					// 	// if (pages.length === 2) {
					// 	// 	uni.navigateBack({
					// 	// 		delta: 1
					// 	// 	});
					// 	// } else if (pages.length === 1) {
					// 	// 	uni.switchTab({
					// 	// 		url: '/pages/index/index',
					// 	// 	})
					// 	// } else {
					// 	// 	uni.navigateBack({
					// 	// 		delta: 1
					// 	// 	});
					// 	// }
					// 	uni.navigateBack();
					// 	history.back();
					// }else{
					//    uni.switchTab({
					// 	   url: '../index/index',
					//    });
					// }
					//登录成功后自动返回上一个页面
	             //    uni.switchTab({
		            //     url: '../index/index',
		            // });
				
					// const pages = getCurrentPages();
					// if (pages.length === 2) {
					// 	uni.navigateBack({
					// 		delta: 1
					// 	});
					// } else if (pages.length === 1) {
					// 	uni.switchTab({
					// 		url: '/pages/index/index',
					// 	})
					// } else {
					// 	uni.navigateBack({
					// 		delta: 1
					// 	});
					// }
	                //uni.setStorageSync("login","yes",{ expires: 1 });
	                // that.$router.push("/index");
	                //that.$emit("loginOut",true);
	                // that.$emit("loginAfter");
	            })
	            .catch(function (error) {
	              console.log(error,222)
	              if(error.data.code=="20004"){
	              	that.$refs.popup.open() 
	              }
	              else if(error.data.code=="20003"){
	              	that.active = 1;
	              	that.title = "验证手机号";
	              	that.$refs.popup.open();
	              }
	            })
				
			},
	        goSearch(){
	        	uni.navigateTo({
                    url: 'search',
                });
	        },


		}
	}
</script>

<style lang="less">
	.login-content{
		padding:0;
		width:100%;
		height:100%;
		background:#f5f5f5;
		overflow:hidden;

		.text-box{
			width:670rpx;
			margin:0 auto;
			margin-top:20rpx;
			height:60rpx;
			.back{
				float:right;
				line-height:60rpx;
				font-size:28rpx;
				color:#666666;
				margin-left:20rpx;
			}
			.reg{
				float:right;
				line-height:60rpx;
				font-size:28rpx;
				color:#666666;
			}
		}
		.login-button{
			margin:0 auto;
			width:670rpx;
			border-radius:10rpx;
			background:#1783dd;
			font-size:32rpx;
			color:#ffffff;
			line-height:90rpx;
			height:90rpx;
			text-align:center;
			margin-top:40rpx;
		}
		.login-box{
			width:670rpx;
			box-sizing:border-box;
			margin:0 auto;
			margin-top:40rpx;
			border:1px solid #f0f0f0;
			border-radius:10rpx;
			overflow:hidden;
			
			.login-item{
				width:100%;
				height:100rpx;
				border-bottom:1px solid #f0f0f0;
				display:flex;
				align-items:center;
				background:#ffffff;
				position:relative;
				.login-input{
					width:calc(100% - 96rpx);
					height:100rpx;
					font-size:28rpx;
					color:#888888;
					box-sizing:border-box;
					padding-left:20rpx;
				}
				.iconzhanghao{
					width:96rpx;
					height:100rpx;
					display:block;
					line-height:100rpx;
					text-align:center;
					font-size:36rpx;
					color:#888888;
				}
				.iconai-password{
					width:96rpx;
					height:100rpx;
					display:block;
					line-height:100rpx;
					text-align:center;
					font-size:36rpx;
					color:#888888;
				}
				.set{
					position:absolute;
					width:150rpx;
					height:50rpx;
					background:#1783dd;
					text-align:center;
					line-height:50rpx;
					border-radius:6rpx;
					font-size:26rpx;
					color:#fff;
					top:25rpx;
					right:30rpx;
				}
				.login-input{
					width:calc(100% - 96rpx);
					height:100rpx;
					font-size:28rpx;
					color:#888888;
					box-sizing:border-box;
					padding-left:20rpx;
				}
				.iconzhanghao,.iconxiaoxi{
					width:96rpx;
					height:100rpx;
					display:block;
					line-height:100rpx;
					text-align:center;
					font-size:36rpx;
					color:#888888;
				}
				.iconai-password{
					width:96rpx;
					height:100rpx;
					display:block;
					line-height:100rpx;
					text-align:center;
					font-size:36rpx;
					color:#888888;
				}
			}
			.login-item:last-child{
				border:0;
			}
		}
		.icondengluyonghu{
			width:200rpx;
			height:200rpx;
			display:block;
			margin:60rpx auto;
			font-size:140rpx;
			color:#777777;
			line-height:200rpx;
			text-align:center;
		}
		.head{
			width:100%;
			height:90rpx;
			box-sizing:border-box;
			padding:0 35rpx;
			padding-top:20rpx;
			background:#ffffff;
			box-shadow:0 -4rpx 16rpx #ccc;
			display:flex;
			justify-content: center;
			position:relative;
			.text{
				line-height:70rpx;
				font-size:36rpx;
				color:#555555;
				font-weight:600;
			}
			.head-right{
				display:flex;
				align-items:center;
				position:absolute;
				right:35rpx;
				top:35rpx;
				.icondelete1{
					display:block;
					font-size:42rpx;
					color:#3478f7;
				}
				.login{
					font-size:28rpx;
					color:#3478f7;
				}
			}
		}
	}

</style>
